<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="../WEB-INF/includes/templates/generalTemplate.xhtml">
    <ui:define name="content">
        <style>

            .top-bar2{
                border: 1px solid #eeeeee;
            }
           
            
             #captcha input{
                height: 10px;
            }

            #captcha input{
                height: 20px;
            }

            #captcha iframe{
                height: 100px;
            }

            #captcha div{
                margin: 0 0 0 0;
            }
           
        </style>  
        <div align="center"  >
        <div id="main" style="min-height:700px;width:100%;height:auto;" >
            <br/>
            <br/>
            <br/>
            <br/>
            <h:form id="newUsuer_form" >

                
                <section  id="services" class="services" >
                    <div class="row" data-view="services" >
                      
                            <div class="row">
                                <div class="columns large-12 large-centered">
                                    <section  class="headline">
                                        <h2 style="text-align:left;">

                                            #{messages['page.newUserRegistry.tittle1']}
                                        </h2>
                                        <h5 class="subheader" style="text-align:left;">
                                            #{messages['page.newUserRegistry.descrpcn1']}
                                        </h5>
                                    </section>
                                </div>
                            </div>
                            <div class="row">
                                <div class="columns large-12 large-centered">
                                    <table>
                                        <thead>
                                            <tr>
                                                <td colspan="2">#{labels['page.newUserRegistry.newuserregistry']}</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td style="background:#FFFFFF;height:20px;text-align:right">
                                                    <h:outputLabel for="username" value="#{labels['page.newUserRegistry.newusername']}"></h:outputLabel>
                                                </td>
                                                <td style="background:#FFFFFF;height:20px;">
                                                    <p:inputText style="text-transform: uppercase;" id="username" label="#{labels['page.newUserRegistry.newusername']}" value="#{newUserRegistryBean.userName}" required="true" autocomplete="off" >
                                                        <p:ajax event="blur" listener="#{newUserRegistryBean.userNameAvailable()}" />
                                                    </p:inputText>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="background:#FFFFFF;height:20px;text-align:right">
                                                    <h:outputLabel for="userpassword" value="#{labels['page.newUserRegistry.newpassword']}"></h:outputLabel>
                                                </td>
                                                <td style="background:#FFFFFF;height:20px;">
                                                    <p:password id="userpassword" label="#{labels['page.newUserRegistry.newpassword']}" value="#{newUserRegistryBean.userPassword}" required="true" >
                                                        <p:ajax event="change" listener="#{newUserRegistryBean.compareUserPasswordAndConfirmation()}" ></p:ajax>
                                                    </p:password>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="background:#FFFFFF;height:20px;text-align:right">
                                                    <h:outputLabel for="userpasswordconfirmation" value="#{labels['page.newUserRegistry.newconfirmpassword']}"></h:outputLabel>
                                                </td>
                                                <td style="background:#FFFFFF;height:20px;">
                                                    <p:password id="userpasswordconfirmation" label="#{labels['page.newUserRegistry.newconfirmpassword']}" value="#{newUserRegistryBean.userPasswordConfirmation}" required="true" >
                                                        <p:ajax event="change" listener="#{newUserRegistryBean.compareUserPasswordAndConfirmation()}" ></p:ajax>
                                                    </p:password>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="background:#FFFFFF;height:20px;text-align:right">
                                                    <h:outputLabel for="useremail" value="#{labels['page.newUserRegistry.email']}"></h:outputLabel>
                                                </td>
                                                <td style="background:#FFFFFF;height:20px;">
                                                    <p:inputText id="useremail" label="#{labels['page.newUserRegistry.email']}" value="#{newUserRegistryBean.userEmail}" required="true" >
                                                        <p:ajax event="change" listener="#{newUserRegistryBean.compareUserEmailAndConfirmation}" update="useremail" ></p:ajax>
                                                    </p:inputText>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="background:#FFFFFF;height:20px;text-align:right">
                                                    <h:outputLabel for="useremailconfirmation" value="#{labels['page.newUserRegistry.confirmemail']}"></h:outputLabel>
                                                </td>
                                                <td style="background:#FFFFFF;height:20px;">
                                                    <p:inputText id="useremailconfirmation" label="#{labels['page.newUserRegistry.confirmemail']}" value="#{newUserRegistryBean.userEmailConfirmation}" required="true" >
                                                        <p:ajax event="change" listener="#{newUserRegistryBean.compareUserEmailAndConfirmation}" update="useremailconfirmation" ></p:ajax>
                                                    </p:inputText>   
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="background:#FFFFFF;height:20px;text-align:right">
                                                    <h:outputLabel for="captcha" value="#{labels['page.newUserRegistry.captcha']}" />
                                                </td>
                                                <td  style="background:#FFFFFF;height:20px;">
                                                    <div id="captcha" style="height:120px;">
                                                        
                                                        <p:captcha id="captchaId" theme="white" label="Captcha"  />    
                                                    </div>
                                                 
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2" style="background:#FFFFFF;height:20px;">
                                                     <p:messages id="msgsLogin"  autoUpdate="true" closable="true"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2" style="background:#FFFFFF;height:20px;text-align:center;    ">
                                                    <p:commandButton id="newUserButton" 
                                                                     value="#{labels['page.general.send']}" 
                                                                     action="#{newUserRegistryBean.createNewUser}" 
                                                                     ajax="false" 
                                                                     style="font-family:'Open sans',sans-serif;font-size:18px;">
                                                    </p:commandButton> 
                                                    <p:commandButton id="cancelButton" 
                                                                     value="#{labels['page.general.exit']}" 
                                                                     action="index" 
                                                                     immediate="true" 
                                                                     ajax="false"
                                                                     style="font-family:'Open sans',sans-serif;font-size:18px;"/>  
                                                </td>
                                            </tr>
                                        </tbody>

                                    </table>



                                    <br />

                                </div>
                           
                        </div>
                    </div>
                </section>
            </h:form>
        </div>
            </div>
    </ui:define>
</ui:composition>
